<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    asynchronous javascript xml

    实现 get,post，上传，下载
    <script>
        ajax('get');
        // ，，，
        const READYSTATE={
            unsent:0, // 初始化但是未发送
            opened:1, // 已经open连接可以调用send发起请求
            headerReceived,// 已经发送请求并且接收到响应头
            loading:3, // 已经响应在下载中
            done:4 // 请求传输已经完成
        } //
       function ajax(method,url,data,async=true,options){
        method=method.toUpperCase();
        url='https://v0.yiketianqi.com/api?unescape=1&version=v91&appid=43656176&appsecret=I42og6Lm&ext=&cityid=&city='
        let xhr=null;
        if (window.XMLHttpRequest)
            {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xhr=new XMLHttpRequest();
            }
            else
            {
                // IE6, IE5 浏览器执行代码
                xhr=new ActiveXObject("Microsoft.XMLHTTP");
            }    
            //open(method,url,async=true)
            // 0.初始化但是未打开连接
            console.log(xhr.readyState)// 状态为 0
            xhr.open(method,url)
            // 1.打开连接未发送请求
            console.log(xhr.readyState)// 状态为 1 
            //必须在open-send之间
            //XMLHttpRequest.setRequestHeader()


            if(method!='GET'){
                xhr.send(data)
            }else{
                xhr.send()
            }
            // 2.发送请求并且等待响应 
            console.log(xhr.readyState)// 状态为 2

            // 3.传输中 状态为 3
            xhr.onprogress = function () {
                   
                };


            // 是否为异步
            if(async){

                // 所有状态变化时调用
                xhr.onreadystatechange=function(){
                    //执行三次，三次握手
                    // readyState:从2->3->4
                    console.log('xhr',xhr);
                    const data=xhr.response
                    const obj=JSON.parse(data)
                    console.log(obj)
                    if(xhr.readyState===READYSTATE.done){

                    }
                }

                
                // 4.成功回调 状态为 4
                xhr.onload=function(){
                    console.log('onload')
                }
                // 5.失败回调 状态为 4
                xhr.onerror=function(){
                    console.log('onerror',xhr)
                }
            }else{
                console.log('xhr')
            }
            
            //可以中止发出的请求XMLHttpRequest.abort()
          
        }
    </script>
    
</body>
</html>